<template>
    <div v-loading="loading" class="detail">
        <SavePage :title="info.number + ' ' + '缺陷详情'">
            <template slot="body">
                <el-form ref="refForm" size="medium" label-width="200px">
                    <el-row>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="巡查类型：">{{ info.typeName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="缺陷病害类型：">{{ info.defectDiseaseType || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="公路名称：">{{ info.highwayName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="方向：">{{ info.directionName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="巡查部门：">{{ info.deptName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="巡查范围：">
                                <span v-if="info.startStake1">K{{ info.startStake1 }}+{{ info.endStake1 }}~K{{ info.startStake2 }}+{{ info.endStake2 }} </span>
                                <span v-else>-</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="巡查日期：">{{ info.inspectDate || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="巡查时段：">{{ info.inspectTime || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="天气：">{{ info.weatherName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="巡查人员：">{{ info.inspectUsersName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="负责人：">{{ info.principalName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item label="上报人：">{{ createUserName || '-' }}</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item v-if="info.locationType" label="位置类型：">{{ info.locationType | value2Name(LocationOptions, 'value', 'label') }}</el-form-item>
                            <el-form-item v-else label="位置类型：">-</el-form-item>
                        </el-col>
                        <el-col :xs="12" :lg="8" :xl="6">
                            <el-form-item v-if="info.locationType === 2" label="桩号：">{{ info.location || '-' }}</el-form-item>
                            <el-form-item v-if="info.locationType === 3" label="桩号范围：">{{ info.location || '-' }}</el-form-item>
                            <el-form-item v-if="info.locationType === 1" label="缺陷位置：">{{ info.location || '-' }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col v-if="info.locationType !== 4" :span="24">
                            <el-form-item label="检查情况：">{{ info.checkSituation || '-' }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col v-if="info.locationType !== 4" :span="24">
                            <el-form-item label="异常描述：">{{ info.abnormalDescription || '-' }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col v-if="info.locationType !== 4" :span="24">
                            <el-form-item label="判定：">{{ info.decide || '-' }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col v-if="info.locationType !== 4" :span="24">
                            <el-form-item label="养护措施建议：">{{ info.suggestion || '-' }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注：">{{ info.remark || '-' }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="img && img.length">
                        <el-col :span="24">
                            <el-form-item label="图片：">
                                <div v-for="(item, index) in img" :key="index" class="img-box">
                                    <el-image
                                        style="width: 100px; height: 100px; margin-right: 8px"
                                        :src="item"
                                        :preview-src-list="[previewSrc]"
                                        :z-index="99999"
                                        @click="previewSrc = item"
                                    >
                                    </el-image>
                                    <span v-if="imgDes.length > 0" class="img-name">{{ '图片' + (index+1) }}</span>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-for="(item, index) in imgDes" :key="index">
                        <el-col :span="24">
                            <el-form-item :label="'图片' + (index+1) + '说明：'">{{ item }}</el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </SavePage>
    </div>
</template>
<script>
import { InspectionDefectRecordModel } from '@/models'
import { LocationOptions } from '../../../constants'
import { value2Name } from '@/filters'
import { mapState } from 'vuex'

export default {
    nane: 'FlawDetail',
    filters: {
        value2Name
    },
    data() {
        return {
            info: {},
            id: this.$route.query.id,
            createUserName: this.$route.query.createUserName,
            model: new InspectionDefectRecordModel(),
            previewSrc: '',
            img: [],
            imgDes: [],
            loading: true
        }
    },
    computed: {
        ...mapState('types', ['weather']),
        LocationOptions() {
            return LocationOptions
        }
    },
    created() {
        this.detail()
        this.$store.dispatch('types/query', 'weather')
        console.log(this.weather)
    },
    methods: {
        detail() {
            this.model
                .detail({ id: this.id })
                .then((res) => {
                    this.info = res
                    if (res.type === 1 || res.type === 2) {
                        if (res.photosArray && res.photosArray.length > 0) {
                            this.img = res.photosArray.map(item => item.url)
                            this.imgDes = res.photosArray.map(item => item.picDesc)
                        } else {
                            this.img = []
                        }
                    } else {
                        this.img = res.photos ? res.photos.split(',') : []
                    }

                    this.loading = false
                })
                .catch(() => {
                    this.loading = false
                })
        }
    }
}
</script>
<style scoped lang='scss'>
.detail {
    width: 100%;
}
.img-box {
    display: inline-block;
    position: relative;
    margin-bottom: 16px;
    .img-name {
        position: absolute;
        left: 50%;
        bottom: -20px;
        transform: translateX(-50%);
    }
}
</style>
